<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%;top:2px;position:absolute">
              <div style="width:40%;float:left;font-size:12px" class="table1style">
                  <table>
                      <tr>
                          <td>快速检索</td>
                          <td>
                              <el-input v-model="txtsearch" @keyup.enter.native="InitPage" clearable placeholder="组合代码|名称|创建人"></el-input>
                          </td>
                      </tr>
                  </table>
              </div>
              <div style="width:60%;float:left;">
                  <table style="float:right">
                      <tr>
                          <td>
                              <el-button icon="el-icon-search" @click="btnQuery" type="primary" :disabled="changeflag">查询</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-plus" @click="btnAdd" :disabled="changeflag">新增</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-delete" @click="btnDelete" :disabled="changeflag">删除</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-document" @click="btnSave" :disabled="!changeflag">保存</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-close" @click="btnClose" :disabled="!changeflag">取消</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-printer" @click="btnCopy">复制</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-printer" @click="btnPaste">粘贴</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-upload2" @click="btnExport">导出</el-button>
                          </td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data.sync="list" :loading="loading" :select-config="{reserve: true}" :sort-config="{trigger: 'cell'}" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe @current-change="currentChangeEvent" :row-class-name="RowClassName" show-header-overflow header-align="center">>
                  <vxe-table-column field="queryreportno" sortable title="组合条件代码" width="110" show-overflow></vxe-table-column>
                  <vxe-table-column field="queryreportname" sortable title="组合条件名称" width="180" show-overflow></vxe-table-column>
                  <vxe-table-column field="descriptions" sortable title="备注" width="380" show-overflow></vxe-table-column>
                  <vxe-table-column field="createuser" sortable title="创建人" width="93" show-overflow></vxe-table-column>
              </vxe-table>
          </div>
          <div class="middle-right">
              <el-form label-width="auto" :model="LabReportList" @submit.native.prevent :disabled="disabledEditflag">
                  <table class="table2style" style="font-size:12px;width:100%">
                      <tr>
                          <td>条件代码</td>
                          <td>
                              <el-input v-model="LabReportList.queryreportno" @input="hasChange"></el-input>
                          </td>
                          <td>创建人</td>
                          <td>
                              <rm-ddl-common datatype="userinfo" dataname="用户" v-model="LabReportList.createuser" width="100px" :disabled="utype!='G'" @change="userinfoChange" :readonly="true"></rm-ddl-common>
                          </td>
                          <td></td>
                      </tr>
                      <tr>
                          <td>条件名称</td>
                          <td colspan="3">
                              <el-input v-model="LabReportList.queryreportname" @input="hasChange"></el-input>
                          </td>
                          <td>
                              <el-button size="small" @click="condition_click">条件向导...</el-button>
                          </td>
                      </tr>
                      <tr>
                          <td align="right" style="vertical-align:top">组合条件</td>
                          <td colspan="4">
                              <div style="width:100%;height:156px;overflow:auto;padding:3px;border:1px solid #ccc" v-html="LabReportList.querysql"></div>
                              <!-- <el-input type="textarea" v-model="LabReportList.querysql" rows="8" readonly></el-input> -->
                          </td>
                      </tr>
                      <tr>
                          <td align="right" style="vertical-align:top">条件解释</td>
                          <td colspan="4">
                              <!-- <el-input type="textarea" v-model="LabReportList.querycomments" rows="8" readonly></el-input> -->
                              <div style="width:100%;height:156px;overflow:auto;padding:3px;border:1px solid #ccc" v-html="LabReportList.querycomments"></div>
                          </td>
                      </tr>
                      <tr>
                          <td align="right" style="vertical-align:top">备注</td>
                          <td colspan="4">
                              <el-input type="textarea" v-model="LabReportList.descriptions" rows="6" @input="hasChange"></el-input>
                          </td>
                      </tr>
                  </table>
              </el-form>
          </div>
          <!--条件向导-->
          <el-dialog title="组合条件向导" v-el-drag-dialog :close-on-click-modal="false" :visible.sync="outerVisible" height="360px" width="800px" :destroy-on-close="true">
              <!--多选弹窗--->
              <el-dialog width="600px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialogMultipleVisible" :destroy-on-close="true" :title="'请选择'+dataname" @close="dialogClose" v-if="dialogx">
                  <div style="height:400px;">
                      <rm-chkboxSelect :datatype="datatype" :kindno="kind" :datacode="datacode" :dataname="dataname" :value="value" @change="closedialog"></rm-chkboxSelect>
                  </div>
              </el-dialog>
              <el-form>
                  <el-row>
                      <div style="width:100%;float:left;height:60px;border:1px solid #ccc;overflow:auto;font-size:12px" v-html="dialogdatatxt">
                      </div>
                      <div style="width:100%;float:left;height:60px;margin-top:5px;border:1px solid #ccc;overflow:auto;font-size:12px" v-html="dialogdataval">
                      </div>
                  </el-row>
                  <el-row>
                      <div style="height:320px;margin-top:5px;border-top:none">
                          <div style="width:100%;float:left;height:100%;">
                              <div style="position:absolute;right:260px;left:0px;overflow:auto;height:100%">
                                  <vxe-table show-overflow ref="xTable2" height="auto" :select-config="{reserve: true}" :data.sync="poptableData" show-header-overflow highlight-current-row highlight-hover-row resizable border @current-change="popcurrentChangeEvent" size="mini">
                                      <vxe-table-column type="index" title="NO." width="50"></vxe-table-column>
                                      <vxe-table-column field="fieldcode" title="字段" width="90" sortable header-align="center"></vxe-table-column>
                                      <vxe-table-column field="fieldcontent" title="条件" width="90" sortable header-align="center"></vxe-table-column>
                                      <vxe-table-column field="fieldvalue" title="取值" width="280" sortable header-align="center"></vxe-table-column>
                                      <vxe-table-column field="fieldtxt" title="" width="0" header-align="center"></vxe-table-column>
                                  </vxe-table>
                              </div>
                          </div>
                          <div style="width:255px;float:left;height:100%;position:absolute;right:0px;border:1px solid #CCC;">
                              <div style="text-align:center;position:realative">
                                  <table style="width:100%">
                                      <tr>
                                          <td colspan="2">
                                              <el-button style="width:100px;margin:4px" @click="operate('报告单元','rptunitid','rptunit','')">报告单元</el-button>
                                          </td>
                                          <td colspan="2">
                                              <el-button style="width:100px;margin:4px" @click="operate('病区','req_wardno','ward','')">病区</el-button>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td colspan="2">
                                              <el-button style="width: 100px;margin:4px;" @click="operate('病人类型','pat_typecode','seccode','PT')">病人类型</el-button>
                                          </td>
                                          <td colspan="2">
                                              <el-button style="width: 100px;margin:4px;" @click="operate('科室','req_deptno','dept','')">科室</el-button>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td colspan="2">
                                              <el-button style="width:100px;margin:4px" @click="operate('年龄','pat_ageyear','patAgeYear','')">年龄</el-button>
                                          </td>
                                          <td colspan="2">
                                              <el-button style="width: 100px;margin:4px" @click="operate('性别','pat_sex','seccode','SX')">性别</el-button>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td colspan="2">
                                              <el-button style="width: 100px;margin:4px;" @click="operate('项目','rptitemid','rptitemmulchk','')">项目</el-button>
                                          </td>
                                      </tr>
                                  </table>
                              </div>
                              <div style="width:100%;float:left;margin-top:85px">
                                  <table style="width:100%;text-align:center">
                                      <tr>
                                          <td>
                                              <el-button @click="savedialog">确 定</el-button>
                                          </td>
                                          <td>
                                              <el-button @click="outerVisible = false">取 消</el-button>
                                          </td>
                                          <td>
                                              <el-button @click="deldialog">删 除</el-button>
                                          </td>
                                      </tr>
                                  </table>
                              </div>
                          </div>
                      </div>
                  </el-row>
              </el-form>
          </el-dialog>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS155",
  data() {
      return {
          outerVisible: false,
          dialogx: false,
          multichktitle: "",
          datacode: "",
          datatype: "",
          dataname: "",
          kind: "",
          dialogMultipleVisible: false,
          loading: false,
          changeflag: false,
          tableData: [],
          AddData: [],
          ModData: [],
          txtsearch: "",
          LabReportList: {
              queryreportno: "",
              createuser: this.$tool.getSession(this.$tool.loginutype) == "G" ? "_Global_" : this.$tool.getSession(this.$tool.loginuserno),
              queryreportname: "",
              querysql: "",
              querycomments: "",
              descriptions: "",
          },
          dialogdatatxt: "",
          dialogdataval: "",
          poptableData: [],
          row: [{ fieldcode: "", fieldcontent: "", fieldvalue: "", fieldtxt: "" }],
          value: "",
          utype: this.$tool.getSession(this.$tool.loginutype),
          disabled: false,
          actionIndex: "A",
          TempData: [],
          curRow: {},
          disabledEditflag: false,
      };
  },
  created() {
      this.InitPage(); //初始化主列表
      //this.getinitdata(); //初始化下拉框的数据
  },
  watch: {
      txtsearch(val) {
          if (this.list.length > 0) {
              this.$refs.xTable.setCurrentRow(this.list[0]);
              this.queryRight(this.list[0].queryreportno);
              this.disabledEditflag = false;
          } else {
              this.LabReportList = {
                  queryreportno: "",
                  createuser: this.$tool.getSession(this.$tool.loginutype) == "G" ? "_Global_" : this.$tool.getSession(this.$tool.loginuserno),
                  queryreportname: "",
                  querysql: "",
                  querycomments: "",
                  descriptions: "",
              };
              this.disabledEditflag = true;
          }
      },
  },
  computed: {
      list() {
          let filterName = this.txtsearch.trim();
          if (filterName) {
              let rest = this.tableData.filter((item) => {
                  return item.queryreportno.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.queryreportname ? item.queryreportname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.createuser ? item.createuser.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
              });
              return rest;
          } else {
              return this.tableData;
          }
      },
  },
  mounted() {},
  updated() {},
  methods: {
      closedialog(value, txt, operate) {
          if (operate == "1") {
              //确定
              if (value != "") {
                  let arr = value.split("$");
                  let data = this.$refs.xTable2.tableData; //获取第一层弹窗所有值
                  this.row = data.find((m) => m.fieldcode == arr[0]);
                  if (this.row != undefined) {
                      //第一层弹窗有值，改变第一层弹窗的值
                      this.row.fieldcode = arr[0];
                      this.row.fieldcontent = arr[1];
                      this.row.fieldvalue = arr[2];
                      this.row.fieldtxt = txt;
                  } else {
                      //第一层弹窗无值插入值
                      let row = { fieldcode: arr[0], fieldcontent: arr[1], fieldvalue: arr[2], fieldtxt: txt };
                      this.$refs.xTable2.insert(row).then(({ row }) => {
                          this.$refs.xTable2.setCurrentRow(row);
                      });
                  }
                  this.$nextTick(async () => {
                      await this.updatedivshow(data);
                  });
              }
              this.dialogMultipleVisible = false;
          } else {
              //取消
              this.dialogMultipleVisible = false;
          }
      },
      async updatedivshow(data) {
          this.dialogdatatxt = "";
          this.dialogdataval = "";
          if (data && data.length > 0) {
              data.forEach((ele) => {
                  this.dialogdataval += ele.fieldcode + " " + ele.fieldcontent + " " + ele.fieldvalue + "<br/>";
                  let arrtxt = ele.fieldtxt.split("$");
                  this.dialogdatatxt += arrtxt[0] + " " + arrtxt[1] + " " + arrtxt[2] + "<br/>";
              });
          }
      },
      btnQuery() {
          this.AddData = [];
          this.ModData = [];
          this.InitPage();
      },
      InitPage() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS155",
                  method: "post",
                  data: {
                      action: "InitPage",
                  },
              })
              .then((response) => {
                  this.tableData = response.RData.Data;
                  this.loadFirstRow(this.$refs.xTable, this.queryRight);
                  this.loading = false;
              })
              .catch((e) => {
                  this.loading = false;
              });
      },
      //自动加载表格的第一行，并执行回调函数
      loadFirstRow(xTable, func) {
          this.$nextTick(() => {
              // 加载第一行
              var selectrow = xTable.getTableData().fullData[0];
              if (selectrow) {
                  this.actionIndex = "M";
                  this.curRow = selectrow;
                  xTable.setCurrentRow(selectrow); //高亮行
                  xTable.scrollToRow(selectrow); //滚动到行
                  if (typeof func == "function") func(selectrow.queryreportno);
              } else {
                  this.actionIndex = "A";
                  this.curRow = {};
                  xTable.setCurrentRow(null); //这个不会自动清空
                  func("");
              }
          });
      },
      async queryRight(queryreportno) {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS1/LIS155",
                  method: "post",
                  data: {
                      action: "queryRight",
                      queryreportno: queryreportno,
                  },
              });
              if (res.Data.length > 0) {
                  this.LabReportList = {
                      queryreportno: res.Data[0].queryreportno,
                      createuser: res.Data[0].createuser,
                      queryreportname: res.Data[0].queryreportname,
                      querysql: res.Data[0].querysql,
                      querycomments: res.Data[0].querycomments,
                      descriptions: res.Data[0].descriptions,
                  };
                  this.disabledEditflag = false;
              } else {
                  this.LabReportList = {};
                  this.disabledEditflag = true;
              }
          } catch (e) {
              this.$message.warning("出错" + e);
          }
      },
      currentChangeEvent({ row }) {
          this.actionIndex = "M";
          if (this.changeflag) {
              this.$refs.xTable.setCurrentRow(this.curRow);
          } else {
              this.curRow = row;
              this.queryRight(row.queryreportno);
          }
      },
      popcurrentChangeEvent({ row }) {},
      getParenthesesStr(text) {
          let result = "";
          if (XEUtils.isEmpty(text)) return result;
          let regex = /\((.+?)\)/g;
          let options = text.match(regex);
          if (!XEUtils.isEmpty(options)) {
              let option = options[0];
              if (!XEUtils.isEmpty(option)) {
                  result = option.substring(1, option.length - 1);
              }
          }
          return result;
      },
      dialogClose() {
          this.dialogx = false;
      },
      operate(name, code, event, kind) {
          this.dialogx = false;
          let data = this.$refs.xTable2.getTableData().fullData; //获取第一层弹窗的表格所有数据
          this.row = [{ fieldcode: "", fieldcontent: "", fieldvalue: "", fieldtxt: "" }];
          if (data && data.length > 0) {
              this.row = data.filter((item) => item.fieldcode == code);
          }
          if (this.row.length > 0) {
              this.value = this.getParenthesesStr(this.row[0].fieldvalue);
          } else {
              this.value = "";
          }
          this.$nextTick(() => {
              this.dataname = name;
              this.datatype = event;
              this.kind = kind;
              this.datacode = code;
          });
          setTimeout(() => {
              this.dialogx = true;
              this.dialogMultipleVisible = true;
          }, 5);
      },
      savedialog() {
          if (this.dialogdatatxt != "") {
              var str1 = XEUtils.clone(this.dialogdatatxt, true);
              var str2 = XEUtils.clone(this.dialogdataval, true);
              this.LabReportList.querycomments = str1;
              this.LabReportList.querysql = str2;
              this.hasChange();
          }
          this.outerVisible = false;
      },
      async deldialog() {
          try {
              let delrow = this.$refs.xTable2.getCurrentRow();
              if (delrow) {
                  let alld = this.$refs.xTable2.tableData;
                  let rowindex = alld.indexOf(delrow);
                  this.$refs.xTable2.remove(delrow);
                  let havedata = this.$refs.xTable2.tableData;
                  if (havedata.length > 0) {
                      if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                      let selectrow = havedata[rowindex];
                      this.$refs.xTable2.setCurrentRow(selectrow);
                  }
                  await this.updatedivshow(havedata);
              }
          } catch (e) {
              console.log("error", e);
          }
      },
      btnAdd() {
          this.actionIndex = "A";
          this.LabReportList = {
              queryreportno: "",
              createuser: this.$tool.getSession(this.$tool.loginutype) == "G" ? "_Global_" : this.$tool.getSession(this.$tool.loginuserno),
              queryreportname: "",
              querysql: "",
              querycomments: "",
              descriptions: "",
          };
          this.disabledEditflag = false;
          this.hasChange();
      },
      async btnDelete() {
          this.$confirm("您确定删除这条数据吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.confirmdel();
              })
              .catch(() => {});
      },
      async confirmdel() {
          try {
              this.actionIndex = "D";
              var delrow = this.$refs.xTable.getCurrentRow();
              if (delrow) {
                  var alld = this.$refs.xTable.tableData;
                  var rowindex = alld.indexOf(delrow);
                  this.btnSave().then((res) => {
                      if (res == "1") {
                          this.$refs.xTable.remove(delrow);
                          this.tableData.splice(rowindex, 1);
                          let havedata = this.$refs.xTable.tableData;
                          if (havedata.length > 0) {
                              if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                              let selectrow = havedata[rowindex];
                              this.$refs.xTable.setCurrentRow(selectrow);
                              this.queryRight(selectrow.queryreportno);
                          } else {
                              this.InitPage();
                              this.changeflag = false;
                          }
                      }
                  });
              }
          } catch (e) {
              console.log("error", e);
          }
      },
      async btnSave() {
          if (this.LabReportList.queryreportno == "") {
              this.$message.warning("请填写组合条件代码！");
              return false;
          }
          if (this.LabReportList.queryreportname == "") {
              this.$message.warning("请填写组合条件名称！");
              return false;
          }
          if (this.LabReportList.querysql == "") {
              this.$message.warning("请填写组合条件！");
              return false;
          }
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS1/LIS155",
                  method: "post",
                  data: {
                      action: "SaveRecord",
                      labreport: this.LabReportList,
                      operate: this.actionIndex,
                  },
              });
              if (res.errcode == "1") {
                  this.changeflag = false;
                  if (this.actionIndex == "A") {
                      this.$message.success("保存成功！");
                      if (this.AddData.indexOf(res.queryreportno) < 0) {
                          this.AddData.push(res.queryreportno);
                      }
                      this.$refs.xTable.insert(this.LabReportList).then(({ row }) => {
                          this.queryRight(row.queryreportno);
                          this.$refs.xTable.setCurrentRow(row);
                          this.tableData.splice(0, 0, row);
                      });
                      this.actionIndex = "M";
                  } else if (this.actionIndex == "M") {
                      this.$message.success("保存成功！");
                      if (this.ModData.indexOf(res.queryreportno) < 0) {
                          this.ModData.push(res.queryreportno);
                      }
                      var currow = this.$refs.xTable.getCurrentRow();
                      currow.queryreportno = this.LabReportList.queryreportno;
                      currow.queryreportname = this.LabReportList.queryreportname;
                      currow.descriptions = this.LabReportList.descriptions;
                      currow.createuser = this.LabReportList.createuser;
                      setTimeout(() => {
                          this.$refs.xTable.setCurrentRow(currow);
                      }, 10);
                  } else {
                      this.$message.success("已删除！");
                      this.actionIndex = "M";
                      return "1";
                  }
              } else {
                  this.$message.error("保存失败！" + res.errmsg);
              }
          } catch (e) {
              this.$message.warning("出错" + e);
          }
      },
      btnClose() {
          this.queryRight(this.curRow.queryreportno);
          this.changeflag = false;
      },
      btnCopy() {
          this.TempData = XEUtils.clone(this.LabReportList, true);
      },
      btnPaste() {
          let data = XEUtils.clone(this.TempData, true);
          this.LabReportList.querysql = data.querysql;
          this.LabReportList.descriptions = data.descriptions;
          this.LabReportList.querycomments = data.querycomments;
      },
      btnExport() {
          let options = {
              filename: "LIS155 报告组合查询条件",
          };
          this.$refs.xTable.exportCsv(options);
      },
      condition_click() {
          //条件向导开窗
          this.dialogdatatxt = XEUtils.clone(this.LabReportList.querycomments, true);
          this.dialogdataval = XEUtils.clone(this.LabReportList.querysql, true);
          let arrval = this.dialogdataval.split("<br/>");
          const arrtxt = this.dialogdatatxt.split("<br/>");
          if (arrval.length > 0) {
              this.outerVisible = true;
              setTimeout(() => {
                  for (let index = 0; index < arrval.length; index++) {
                      const iterator = arrval[index];
                      const element = arrtxt[index];
                      if (iterator != "") {
                          let arr = iterator.split(" ");
                          let row = { fieldcode: arr[0], fieldcontent: arr[1], fieldvalue: arr[2], fieldtxt: element.split(" ").join("$") };
                          this.$refs.xTable2.insert(row).then(({ row }) => {
                              this.$refs.xTable2.setCurrentRow(row);
                          });
                      }
                  }
                  // for (const iterator of arritem) {
                  //     if (iterator != "") {
                  //         let arr = iterator.split(" ");
                  //         let row = { fieldcode: arr[0], fieldcontent: arr[1], fieldvalue: arr[2], fieldtxt: "" };
                  //         this.$refs.xTable2.insert(row).then(({ row }) => {
                  //             this.$refs.xTable2.setCurrentRow(row);
                  //         });
                  //     }
                  // }
              }, 10);
          } else {
              this.outerVisible = true;
          }
      },
      RowClassName({ row, rowIndex }) {
          if (this.AddData.indexOf(row.queryreportno) > -1) {
              return "row-new";
          }
          if (this.ModData.indexOf(row.queryreportno) > -1) {
              return "row-modify";
          }
      },
      hasChange() {
          this.changeflag = true;
      },
      userinfoChange(code, name) {
          this.LabReportList.createuser = code;
          this.hasChange();
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 555px;
  overflow: auto;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 550px;
  right: 0px;
  border: 1px solid #ccc;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}
.table2style tr td {
  padding: 2px 3px 2px 10px;
}
::v-deep tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep tr.vxe-body--row.row-modify {
  color: blue !important;
}

::v-deep .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
</style>


